<template>
	<div id="news">

<mt-header   fixed title="代取件区">
			<router-link to="/" slot="left">
				<mt-button icon="back">返回</mt-button>
			</router-link>
			<mt-button icon="more" slot="right"></mt-button>
		</mt-header>
<div >
<div id="help">
<img   src="../../assets/help.png">
</div>
<div id="username">
<span  class="name">Aiqnad</span>
<br>
<br>
<br>
<span><a>快递信息</a></span>
|
<span><a>填写信息</a></span>
<hr>
</div>

<div  id="information">
 <div class="page-picker">
  <p class="page-picker-desc">快递: {{ express}}</p>
    <div class="page-picker-wrapper">
      <mt-picker :slots="expressSlot" @change="onYearChange" :visible-item-count="2"></mt-picker>
</div>
</div>
 <div id="quhao">
  <p class="c">区号: {{ number}}</p>
    <div class="r">
      <mt-picker :slots="numberSlot" @change="onYearChangetwo" :visible-item-count="2"></mt-picker>
</div>

<div id="step"><img src="../../assets/step.jpg"></div>
<div id="xinxione">
<fieldset id="fl2">
                            <input type="text" id="text1" placeholder="请输入手机号码"><br><br>
                            <input type="text" id="password" placeholder="请输入宿舍楼" ><br>
                                                                                         <br>
                                                                                          <br>
                          <mt-button  id="mt-button"  @click="choose" >
                                <img src="../../assets/help.png" height="40" width="40" slot="icon">
                               滴滴，帮我取
                               </mt-button>

                        </fieldset></div>



</div>
</template>




<script>
import Vue from 'vue'


export default {
	name:'comment',
	data () {
    	return {
    	     express: '中通',
    	      number: '1',
    	       numberSlot: [{
    	         flex: 1,
                 values: ['1', '2', '3', '4', '5', '6', '7', '8', '9','A','B'],
                  className: 'slot1'
                                                          }
                                          ]
                                          ,
                expressSlot: [{
                  flex: 1,
                  values: ['中通', '韵达', '申通', '顺丰', '汇通', '圆通', '天天快递', 'EMS', '如风达'],
                  className: 'slot1'
                }]
                ,
     }},
     methods:{
      onYearChange(picker, values) {
             this.express = values[0];
           },
           onYearChangetwo(picker, values) {
                        this.number = values[0];
                      },
                      choose(){
                        this.$router.push({ path:'/functionOnechoose'})
                      }
     }}
</script>

<style>

fieldset{
    border: 0;
    padding: 0;
    margin: 0;
}
#mt-button{
background:rgb(185,203,239);
color:white;
font-weight:bold;
height:65px;
}
#help{
float:left;
margin-top:15px;
margin-left:5px;
width:80px;
height:auto;
position:absolute;
}
#help img{
width:150px;
height:120px;
}
.name{
font-size:30px;
}
#username{
float:left;
position:absolute;;
margin-left:150px;
margin-top:30px;
}
#username a{
font-size:10px;
color:black;
}
hr{
width:250px;
size:40px;
}
#information{
	width:100px;
	height:100px;;
padding-top:180px;

}

#quhao{
width:100%;
position:relative;;
	height:100px;
margin-left:120px;
margin-top:-123px;
}
#xinxione{
float:left;
position:relative;
margin-left:-100px;
margin-top:-380px;

}
#fl2 input{
	width:155px;
	height:60px;
	padding: 3px 3px 3px ;
	margin:0 0 5px 0;
	 border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
#fl2 input[id="password"]{
    background:url(../../assets/01.jpg) no-repeat 1px -38px #ffffff;
	padding:0em 0em 0em 4.7em;
}

#fl2 input[id="text1"]{
    background:url(../../assets/02.jpg) no-repeat 1px -38px #ffffff;
	padding:0em 0em 0.3em 4.7em;
}
#step{
width:auto;
height:580px;
position:relative;
margin-top:-168px;
margin-left:130px;
float:left;
}

#username a{
    font-size:14px;
}
</style>